<style lang="scss">
  .ui-page {
    padding-bottom: 20px;

    .ui-detail-box {
      .ui-detail-btus {
        // text-align: right;
      }
    }
  }
</style>
<template>
  <div class="ui-page">
    <div class="ui-list ui-box">
      <div class="box-header ui-list-header">
        <div>{{this.$route.query.title}}详情</div>
        <div>
          <el-button type="primary" size="mini" @click="back">返回</el-button>
          <el-button type="primary" size="mini" @click="isAdmin">修改密码</el-button>
        </div>
      </div>
      <div class="ui-detail-box">
        <el-form class="ui-search-form" label-width="120px">
          <el-form-item label="用户id">
            <el-input size="mini" disabled class="ui-item-reset" v-model="userItem.userId"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input size="mini" class="ui-item-reset" v-model="userItem.username" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请选择" size="mini" class="ui-item-reset" v-model="userItem.status" :disabled="editFlag">
            <el-option label="禁用" :value="2"></el-option>
              <el-option label="启用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input size="mini" disabled class="ui-item-reset" v-model="userItem.createTime"></el-input>
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input size="mini" disabled class="ui-item-reset" v-model="userItem.updateTime"></el-input>
          </el-form-item>
          <el-form-item label="上次登录时间">
            <el-input size="mini" disabled class="ui-item-reset" v-model="userItem.lastLoginTime"></el-input>
          </el-form-item>
        </el-form>
        <div class="ui-detail-btus">
          <el-button size="mini" @click="editFlag=false" v-if="editFlag">编辑</el-button>
          <el-button size="mini" @click="cancelEdit" v-else>取消</el-button>
          <el-button type="primary" size="mini" @click="saveItem" :disabled="editFlag">保存</el-button>
        </div>
      </div>
    </div>
    <div class="ui-list ui-box">
      <div class="box-header ui-list-header">
        <div>用户关联角色</div>
        <div>
          <el-button type="primary" size="mini" @click="addRoleFlag=true">新增</el-button>
        </div>
      </div>
      <div class="ui-detail-box">
        <el-table :data="roleList" :cell-style="cellStyle" :header-cell-style="rowClass">
          <el-table-column prop="roleId" label="角色ID"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
              <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="checkRole(scope.row)">详情</el-button>
              <el-button size="mini" type="danger" @click="deleteRole(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="请选择要添加的角色" :visible.sync="addRoleFlag" width="30%">
      <el-select v-model="roleItem" placeholder="请选择" size="mini">
        <el-option :label="item.name" :value="item.roleId" v-for="item in roleListAll" :key="item.roleId"
                   :disabled="item.select==1"></el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addRoleFlag = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="addRole" size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="changePwdFlag" width="400px">
      <el-form class="ui-search-form" label-width="120px">
        <el-form-item label="新密码">
          <el-input size="mini" class="ui-item-reset" type="password" v-model="userItem.password"
                    show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePwdFlag = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="changePwd" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'userDetail',
    data() {
      return {
        userId: this.$route.query.id,
        userItem: {},
        editFlag: true,
        roleList: [], // 已绑定的角色
        roleListAll: [], // 未绑定的角色
        hasRoles: [],
        addRoleFlag: false,
        roleItem: '', // 准备绑定的角色
        changePwdFlag: false,
        chaPwd: {
          confirmNewPassword: '',
          newPassword: '',
          oldPassword: ''
        }
      }
    },
    created() {
      this.getItem()
      // this.userItem=this.$route.query.userItem
      this.getRole()
    },
    methods: {
      back() {
        console.log(this.$route)
        this.$router.back(-1);
      },
      cancelEdit() {
        this.editFlag = !this.editFlag;
        // this.getItem()
      },
      saveItem() {
        let users = this.userItem
        delete users.createTime
        delete users.updateTime
        delete users.lastLoginTime
        console.log('user', users)
        post(`/pms_api/user/edit`, users).then(res => {
          this.cancelEdit()
          this.getItem()
        }).catch(err => {
          console.log(err)
        })
      },
      isAdmin() {
        let userInfo = this.$getGlobal.getItem('userInfo')
        console.log(userInfo)
        if (userInfo.roleId !== 1 && userInfo.roleId !==2) {
          this.$confirm('此操作仅限超级管理员使用,普通用户请前去个人中心修改密码', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          })
        } else {
          this.changePwdFlag = true
        }

      },
      changePwd() {
        let userTmp = {newPassword: this.userItem.password, userId: this.userItem.userId}
        post(`/pms_api/user/adminChangePassword`, userTmp).then(res => {
          this.getItem()
        }).catch(err => {
          console.log(err)
        })
        this.changePwdFlag = false
      },
      getItem() {
        post(`/pms_api/user/detail?userId=${this.userId}`).then(res => {
          console.log('res', res)
          this.userItem = res.data[0]
        }).catch(err => {
          console.log(err)
        })
      },
      // 以下为操作用户绑定的角色
      getRole() {
        post(`/pms_api/user/assign/role/list`, {userId: this.userId}).then(res => {
          this.hasRoles = res.data
          // console.log(this.hasRoles)
          post('pms_api/role/list').then(res => {
            // console.log('res',res)
            this.roleListAll = res.data
            // console.log(this.roleListAll[0].roleId)
            this.roleList = []
            // this.roleList=res.data[0]
            for (let i in this.hasRoles) {
              for (let j in this.roleListAll) {
                if (this.hasRoles[i].roleId === this.roleListAll[j].roleId) {
                  this.roleList.push(this.roleListAll[j])
                  // console.log(this.roleList)
                  this.roleListAll[j].select = '1'
                }
              }
            }
          })
        }).catch(err => {
          console.log(err)
        })
      },
      //为用户添加角色
      addRole() {
        let roleIdStrTmp = []
        for (let i in this.hasRoles) {
          roleIdStrTmp.push(this.hasRoles[i].roleId)
        }
        roleIdStrTmp.push(this.roleItem)
        let params = {userId: this.userItem.userId, roleIds: roleIdStrTmp}
        post(`/pms_api/user/assign/role`, params).then(res => {
          this.getRole()
        }).catch(err => {
          console.log(err)
        })
        this.addRoleFlag = !this.addRoleFlag;
        this.roleItem = ''
      },
      checkRole(item) {
        this.$router.push({
          path: '/roleDetail',
          query: {
            title: item.name,
            id: item.roleId,
          }
        })
      },
      deleteRole(item) {
        this.$confirm('此操作将取消该角色与用户的绑定，是否继续', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // delete this.hasRoles[item.$index]
          // console.log(this.hasRoles[item.$index])
          let params = {userId: this.userItem.userId, roleId: item.roleId}
          post(`/pms_api/user/assign/role/delete`, params).then(res => {
            this.getRole()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(err => {
            console.log(err)
          })
        }).catch(err => {
        })
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      }
    }
  }
</script>
